<template>
  <div>
    <div class="wrapper">
      <div class="container container-login">
        <a href="javascript:;" title="返回首页" class="logo">骡窝窝</a>
        <div class="signup-forms flip">
          <div class="login-box" id="_j_login_box">
            <div class="inner inner_v2 clearfix" v-if="isshow">
              <div class="inner_v2_left">
                <form id="_j_login_form" action="javascript:;">
                  <div class="form-field">
                    <input
                      id="inputPassword"
                      type="text"
                      placeholder="您的手机号"
                      autocomplete="off"
                      value=""
                      v-model="phone"
                    />
                    <div class="err-tip"></div>
                  </div>
                  <div class="submit-btn">
                    <button id="_js_loginBtn" @click="registFn()">
                      立即注册
                    </button>
                  </div>
                </form>
                <div class="agreement">
                  注册视为同意<a target="_blank" href="javascript:;"
                    >《骡窝窝用户使用协议》</a
                  >
                </div>
                <div class="connect">
                  <p class="hd">用合作网站账户直接登录</p>
                  <div class="bd">
                    <a href="javascript:;" class="weibo"><i></i>新浪微博</a>
                    <a href="javascript:;" class="qq"><i></i>QQ</a>
                    <a href="javascript:;" class="weixin"><i></i>微信</a>
                    <div class="clear"></div>
                  </div>
                </div>
              </div>
              <div class="inner_v2_right">
                <img src="../assets/images/qrcode.jpg" />
                <p>扫一扫<br />下载骡窝窝APP</p>
              </div>
            </div>
          </div>
          <div class="signup-box" v-if="!isshow">
            <div class="add-info">
              <div class="hd">账号注册</div>
              <form method="post" id="editForm">
                <input type="hidden" name="phone" value="" id="phone" />
                <div class="form-field m-t-10">
                  <input
                    name="nickname"
                    type="text"
                    placeholder="您的昵称"
                    v-model="nickname"
                  />
                  <div class="err-tip"></div>
                </div>
                <div class="form-field">
                  <input
                    name="password"
                    type="password"
                    placeholder="您的密码"
                    v-model="password"
                  />
                  <div class="err-tip"></div>
                </div>
                <div class="form-field">
                  <input
                    name="rpassword"
                    type="password"
                    placeholder="确认密码"
                    v-model="rpassword"
                  />
                  <div class="err-tip"></div>
                </div>

                <div class="form-field">
                  <div class="clearfix">
                    <a href="./regist.html#" class="vcode-send sms-code-send"
                      >获取验证码</a
                    >
                    <input
                      name="verifyCode"
                      type="text"
                      placeholder="短信验证码"
                      autocomplete="off"
                      class="vcode-input"
                      v-model="verifyCode"
                    />
                  </div>
                  <div class="err-tip clearfix"></div>
                </div>
                <div class="submit-btn">
                  <button type="button" @click="goLoginFn()">完成注册</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- style="background-image: url(../assets/images/27.jpg)" style="width: auto; height: 657px; margin-top: -213px"-->
    <div class="fullscreen-bg fullscreen-bg-x">
      <img src="../assets/images/27.jpg" class="fullscreen-bg-img" />
    </div>
  </div>
</template>

<script>
import "../assets/css/base.css";
import "../assets/css/regist.css";
import { RegistAPI } from "../request/api";
export default {
  data() {
    return {
      isshow: true,
      phone: "",
      verifyCode: "",
      nickname: "",
      password: "",
      rpassword: "",
    };
  },
  methods: {
    registFn() {
      if (this.phone != "") {
        console.log(this.phone);
        this.isshow = !this.isshow;
      } else {
        alert("请输入手机号");
      }
    },
    async goLoginFn() {
      console.log(
        this.verifyCode,
        this.nickname,
        this.password,
        this.rpassword
      );
      if (
        (this.verifyCode != "",
        this.nickname != "",
        this.password != "",
        this.rpassword != "")
      ) {
        let res = await RegistAPI({
          phone: this.phone,
          verifyCode: this.verifyCode,
          nickname: this.nickname,
          password: this.password,
          rpassword: this.rpassword,
        });
        console.log(res);
        return;
      } else {
        alert("请补齐");
      }
    },

    //   if ((this.username != "", this.password != "")) {
    //     console.log(123);
    //     let res = await LoginAPI({
    //       password: this.password,
    //       username: this.username,
    //     });
    //     localStorage.setItem("token", res.data.data.token);
    //     console.log(res);
    //   } else {
    //     alert("请输入账号密码");

    // },
  },
};
</script>

<style lang="less">
.fullscreen-bg-x {
  background-image: url(../assets/images/27.jpg);
  .fullscreen-bg-img {
    width: auto;
    height: 657px;
    margin-top: -213px;
  }
}
</style>